<script setup lang="ts">
import { ref, watch, onBeforeUnmount, onMounted, nextTick } from "vue";
import { message } from "@/utils/message";
import "@wangeditor/editor/dist/css/style.css";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import { FreeMode, Navigation, Thumbs, A11y, Autoplay } from "swiper/modules";

defineOptions({
  name: "WangEditor"
});

// 传值
const props = defineProps({
  file: {
    type: String,
    default: ""
  }
});
const fileUrl = localStorage.getItem("picurl");

const isInit = ref(false);
const modules = [Thumbs, Navigation, FreeMode, A11y, Autoplay];
const goodImgList = ref([]);
const swiperRef = ref<any>(null);
const thumbsSwiper = ref<any>(null);
const setThumbsSwiper = (swiper: any) => {
  thumbsSwiper.value = swiper;
};
const setSwiper = (swiper: any) => {
  swiperRef.value = swiper;
};
const swiperStyle = {
  "--swiper-navigation-color": "#fff",
  "--swiper-pagination-color": "#fff"
};

const pauseSwiper = () => {
  if (swiperRef.value && swiperRef.value.size) {
    swiperRef.value.autoplay.stop();
  }
};

const resumeSwiper = () => {
  if (swiperRef.value && swiperRef.value.size) {
    swiperRef.value.autoplay.start();
  }
};

watch(
  () => props.file,
  newValue => {
    if (newValue && !isInit.value) {
      isInit.value = true;
      // 处理图片
      let imgList = JSON.parse(newValue);
      goodImgList.value = imgList.map(v => {
        return fileUrl + v.fileUrl;
      });
    }
  },
  { immediate: true }
);
</script>
<template>
  <div class="wangeditor">
    <swiper
      :style="swiperStyle"
      :spaceBetween="10"
      :slides-per-view="1"
      :thumbs="{ swiper: thumbsSwiper } as any"
      :modules="modules"
      :autoplay="{ delay: 3500, disableOnInteraction: false } as any"
      :navigation="{ enabled: true } as any"
      class="mySwiper2"
      @swiper="setSwiper"
      @mouseenter="pauseSwiper"
      @mouseleave="resumeSwiper"
    >
      <swiper-slide v-for="(item, index) of goodImgList" :key="index">
        <el-image
          fit="cover"
          :preview-teleported="true"
          :src="item"
          :preview-src-list="goodImgList"
          :initial-index="index"
          class="rounded w-full h-full"
        />
      </swiper-slide>
    </swiper>
    <swiper
      v-if="goodImgList.length > 1"
      :spaceBetween="10"
      :slidesPerView="5"
      :watchSlidesProgress="true"
      :modules="modules"
      class="mySwiper"
      @swiper="setThumbsSwiper"
    >
      <swiper-slide v-for="(item, index) of goodImgList" :key="index">
        <el-image fit="cover" :src="item" class="rounded w-full h-full" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<style lang="scss" scoped>
:deep(.mySwiper2 .swiper-button-prev:after, ) {
  font-size: 32px;
}
:deep(.mySwiper2 .swiper-button-next:after) {
  font-size: 32px;
}
.mySwiper {
  padding: 10px 0;
}
.swiper-slide {
  border: 1px solid #efefef;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
}
.mySwiper .swiper-slide {
  width: 20%;
  height: 58px;
  opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.mySwiper2 .swiper-slide {
  height: 320px;
}
</style>
